import React, { Component } from 'react';

import { routeList } from '../../utils/route';
import { Layout, Menu } from 'antd';
import { UserOutlined, VideoCameraOutlined, UploadOutlined } from "@ant-design/icons"
import {withRouter}  from "react-router-dom"
import {observer} from "mobx-react"
import user from '../../mobx/userinfo';

const { Sider} = Layout;
const { SubMenu } = Menu;



@withRouter

@observer
class SlideMenu extends Component {
    //通过递归渲染侧边栏内容 routeList 当参数传入
    renderItem = (routeList) => {
        var role=2;   
        if(user.userinfo){
            role = user.userinfo.role;   // 当前用户权限  
        }
        return routeList.map((item, i) => {
        //进行循环routeList 先判断是否有children (有children 渲染 第二层列表SubMenu，没有child渲染第一层列表)
            if (item.children) {
                if (role < item.premission) { //判断对应权限可以看到的板块 role是此前登录用户的等级
                    return null;
                } else {
                    //注意此处需要返回return
                    return (
                        <SubMenu key={item.path} icon={item.icon} title={item.name}>
                            {/* 通过递归循环child内层数据 */}
                            {this.renderItem(item.children)}
                        </SubMenu>
                    )
                }               
                //如果routeList里面不存在子路由，直接渲染第一层Menu.Item
            } else {
                if (role < item.premission) {  
                    return null;
                } else {
                    return (
                        <Menu.Item key={item.path} icon={item.icon}>
                            {item.name}
                        </Menu.Item>
                    )
                }
            }
        })
    }
    handleMenuClick=(item)=>{
        this.props.history.push(item.key)
    }
    render() {
        return (
            <Sider theme="light"
                style={{
                    overflow: 'auto',
                height: '100vh',
              }}
            >

                <div style={{ height: "112px", color: "white", lineHeight: "50px", fontSize: "20px" }}><span>管理系统</span></div>
                <Menu  theme="light" mode="inline" onClick={this.handleMenuClick} defaultSelectedKeys={['1']}>
                    {this.renderItem(routeList)}
                </Menu>
            </Sider>

        );
    }
}


export default SlideMenu;